<template>
    <div>
        <ul>
            <li v-for="(item,index) in list" @click="changecolor(index)" :class="item.flag?'color':''">{{item.name}}</li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list:[{
                id:1,name:'中文简繁体转换工具',flag:false
            },{
                id:2,name:'中文转拼音注音工具',flag:false
            },{
                id:3,name:'成语查询工具',flag:false
            },{
                id:4,name:'转换工具',flag:false
            },{
                id:5,name:'在线翻译工具',flag:false
            },{
                id:6,name:'五笔编码查询',flag:false
            },{
                id:7,name:'拼音首字母缩写',flag:false
            },{
                id:8,name:'一句诗词',flag:true
            },{
                id:9,name:'励志句子',flag:false
            },{
                id:10,name:'毒鸡汤',flag:false
            }]
        }
    },
    methods:{
        changecolor(index){
            this.list.map(item=>item.flag=false);
            this.list[index].flag=!this.list[index].flag;
        }
    }
}
</script>

<style scoped lang="scss">
ul{
    background-color: #222;
    li{
    list-style: none;
    text-align: center;
    color: #b8b8b8;
    font-size: .9rem;
    line-height: 2.5;
    &:hover{
        color: #4caf50;
    }
}
}
.color{
    color: #4caf50;
}
</style>